<template>
  <div class="app-container">
    <el-row :gutter="10" type="flex" class="row-bg" justify="end">
      <el-col :span="18">
        <el-card class="el-card">
          <div class="clearfix">视频播放</div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <video id="myVideo" class="video-js" ref="video">
              <source :src="videoUrl" type="video/mp4" />
            </video>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="el-card">
          <div class="clearfix">视频列表</div>
          <el-scrollbar wrap-class="list" wrap-style="color: red; height:590px;" view-class="view-box" view-style="height:100%;" :native="false">
          <el-table
            ref="videoTableList"
            :data="videoList"
            style="width: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
            @row-click="getVidooListDetails"
          >
            <el-table-column prop="uuid" />
          </el-table>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="5" type="flex" class="row-bg" justify="center" />
    <el-col :span="18">
      <el-card class="el-card">
        <div class="clearfix">自检人员信息</div>
        <el-table
          :data="userCheckTask"
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="检测瓶ID" prop="bottle_id" />
          <el-table-column label="上传时间" prop="upload_time" />
          <el-table-column label="审查状态">
            <template slot-scope="userCheckStatus_scope">
              <el-radio-group
                v-model="video_state"
                @change="update_video_state(userCheckStatus_scope.row)"
              >
                <el-radio :label="-1">未通过</el-radio>
                <el-radio :label="0">待审查</el-radio>
                <el-radio :label="1">通过</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import {
  getCheckVideoList,
  getVideoUrl,
  updateVideoState,
  getCheckTaskByUuid
} from "@/api/video/video";
import example_vidio from "../../../assets/examp_video/example.mp4";
/* eslint-disable */
export default {
  name: "videoplay",
  data() {
    return {
      videoList: [],
      videoUrl: example_vidio,
      vidoeCurrentRow: null,
      video_url_s3: "",
      userCheckTask: [],
      video_state: 1,

    };
  },
  created() {
    this.initCheckVideoList();
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      //初始化视频方法
      let myPlayer = this.$video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "autoplay",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "1300px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "580px",
      });
    },
    initCheckVideoList() {
      getCheckVideoList().then((response) => {
        const { data } = response;
        this.videoList = data;
      });
    },//视频列表点击事件
    async getVidooListDetails(row) {
      await getCheckTaskByUuid(row.uuid).then((response) => {
          const { data } = response
          this.userCheckTask = []
          this.userCheckTask.push(data)
          this.video_state = data.video_state;

      })
      await getVideoUrl(row.video_url).then((response) => {
        const { data } = response;
        this.video_url_s3 = data.video_url_s3;
      });
      this.$refs.video.src = this.video_url_s3;
    },
    update_video_state(row) {
      let uuid = row.uuid
      let video_state = this.video_state
      updateVideoState([uuid,video_state]).then((response) => {
        const { data } = response;
      });
    },
    setCurrent(row) {
      this.$refs.videoTableList.setCurrent(row);
    },
    handleCurrentChange(val) {
      this.vidoeCurrentRow = val;
    },
  },
};
</script>

    <style scoped>
.el-table__body .el-table__row.hover-row td {
  background-color: #2f87f1;
}
.el-table__body tr.current-row > td {
  background-color: #0070c0ad !important;
}
</style>
